<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <#include "../common/header.ftl">
    <script type="text/javascript"
            src="https://api.map.baidu.com/api?v=2.0&ak=j09GQBURkfAifzXdb1MZP8KgbQDVxmPw"></script>
    <script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.min.js"></script>
</head>
<body>
<div class="container-fluid">
    <#include "../common/left-nav.ftl">

    <div class="main-box">
        <div class="container-fluid">
            <div class="row show-grid">
                <div class="col-md-12">
                    <div class="msg-panel">
                        <div class="col-md-4">
                            <h2>Hi! <i data-field="account-name">-</i></h2>
                        </div>
                        <div class="col-md-2">
                            <h3><i data-field="carCount">-</i>
                                <small>辆</small>
                            </h3>
                            <span>车辆数</span>
                        </div>
                        <div class="col-md-2">
                            <h3><i data-field="pubOrderCount">-</i>
                                <small>单</small>
                            </h3>
                            <span>发布中的订单</span>
                        </div>
                        <div class="col-md-2">
                            <h3><i data-field="workingOrderCount">-</i>
                                <small>单</small>
                            </h3>
                            <span>进行中的订单</span>
                        </div>
                        <div class="col-md-2">
                            <h3><i data-field="currentMonthCount">-</i>
                                <small>单</small>
                            </h3>
                            <span>本月完成订单</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row show-grid">
                <div class="col-md-7">
                    <div class="map-content" id="allMap"></div>
                </div>

                <div class="col-md-5">
                    <div class="panel panel-freight">
                        <div class="panel-heading"><b>订单统计</b></div>
                        <div class="panel-body" style="height: 400px" id="main">
                        </div>
                    </div>

                    <div class="panel panel-freight">
                        <div class="panel-heading"><b>代办处理事项</b></div>
                        <div class="panel-body" style="height: 290px;">
                            <ul class="data-li">
                                <li><a href="#">司机【张三】申请入职贵公司，请批准审核！</a><span>2018/10/14</span></li>
                                <li><a href="#">司机【王老五】申请入职贵公司，请批准审核！</a><span>2018/10/14</span></li>
                                <li><a href="#">司机【王二麻子】申请入职贵公司，请批准审核！</a><span>2018/10/14</span></li>
                                <li><a href="#">司机【左二】申请入职贵公司，请批准审核！</a><span>2018/10/14</span></li>
                                <li><a href="#">司机【李四】申请入职贵公司，请批准审核！</a><span>2018/10/14</span></li>
                                <li><a href="#">司机【张三】申请入职贵公司，请批准审核！</a><span>2018/10/14</span></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

<script type="text/javascript">
    var map;
    $(document).ready(function () {
        // 百度地图API功能
        map = new BMap.Map("allMap");    // 创建Map实例
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
        //添加地图类型控件
        map.addControl(new BMap.MapTypeControl({
            mapTypes: [
                BMAP_NORMAL_MAP,
                BMAP_HYBRID_MAP
            ]
        }));
        map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        map.setMapStyle({style: 'grayscale'});

        $.httpclient.get(API_ADMIN_HOME + '/outline', {
            time: new Date().getTime()
        }, function (res) {
            fullField(res.obj);
        });


        var myChart = echarts.init(document.getElementById('main'));
        $.httpclient.get(API_ADMIN_HOME + '/report', {
            time: new Date().getTime()
        }, function (res) {
            var data = res.obj;
            var seriesData = [];
            var now = new Date();
            var year = now.getFullYear();
            for (var i = 1; i <= now.getMonth() + 1; i++) {

                var key;
                if (i < 10) {
                    key = year + '-0' + i;
                } else {
                    key = year + '-' + i;
                }

                if (data[key]) {
                    seriesData.push(data[key]);
                } else {
                    seriesData.push(0);
                }
            }

            var option = {
                grid: {
                    top: '0',
                    left: '10px',
                    right: '10px',
                    bottom: '0',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: '{b0}: {c0} 单'
                },
                xAxis: {
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    type: 'category',
                    boundaryGap: false,
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                },
                yAxis: {
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    type: 'value'
                },
                series: [{
                    data: seriesData,
                    type: 'line',
                    smooth: true,
                    symbolSize: 10,
                    color: '#5fc1c7',
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#5fc1c7'
                            }, {
                                offset: 1,
                                color: '#ffffff'
                            }])
                        }
                    }
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        })
    });


</script>
